<template>
  <div>
    <div id="map-container" ref="mapContainer"></div>
    <div v-if="showMenu" class="context-menu" :style="{ top: `${menuY}px`, left: `${menuX}px` }">
      <ul>
        <li @click="performAction('action1')">操作 1</li>
        <li @click="performAction('action2')">操作 2</li>
        <li @click="performAction('action3')">操作 3</li>
        <li @click="performAction('action4')">操作 4</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Map, View } from 'ol';
import { Tile as TileLayer } from 'ol/layer';
import { get } from 'ol/proj';
import { getWidth, getTopLeft } from 'ol/extent';
import { WMTS } from 'ol/source';
import WMTSTileGrid from 'ol/tilegrid/WMTS';
import { defaults as defaultControls } from 'ol/control';
import 'ol/ol.css';

export const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = [];

for (let z = 0; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

export default {
  data() {
    return {
      map: null,
      showMenu: false,
      menuX: 0,
      menuY: 0,
    };
  },
  mounted() {
    // 加载矢量底图
    this.initMap();
    // 添加右键菜单事件监听
    this.$refs.mapContainer.addEventListener('contextmenu', this.showContextMenu);
    window.addEventListener('click', this.hideContextMenu);
  },
  methods: {
    initMap() {
      const KEY = '你申请的KEY';

      this.map = new Map({
        target: this.$refs.mapContainer,
        layers: [
          // 底图
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/vec_c/wmts?tk=${KEY}`,
              layer: 'vec',
              matrixSet: 'c',
              style: "default",
              crossOrigin: 'anonymous',
              format: "tiles",
              wrapX: true,
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: Array.from({length: 19}, (_, i) => i.toString())
              })
            })
          }),
          // 标注
          new TileLayer({
            source: new WMTS({
              url: `http://t{0-6}.tianditu.com/cva_c/wmts?tk=${KEY}`,
              layer: 'cva',
              matrixSet: 'c',
              style: "default",
              crossOrigin: 'anonymous',
              format: "tiles",
              wrapX: true,
              tileGrid: new WMTSTileGrid({
                origin: getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: Array.from({length: 19}, (_, i) => i.toString())
              })
            })
          })
        ],
        view: new View({
          center: [120.430070, 31.938140],
          projection: projection,
          zoom: 16,
          maxZoom: 17,
          minZoom: 1
        }),
        controls: defaultControls({
          zoom: false,
          rotate: false,
          attribution: false
        })
      });
    },

    showContextMenu(event) {
      //通知 Web 浏览器不要执行与事件关联的默认动作
      event.preventDefault();
      this.showMenu = true;
      this.menuX = event.clientX;
      this.menuY = event.clientY;
    },

    hideContextMenu() {
      this.showMenu = false;
    },

    performAction(action) {
      console.log(`执行: ${action}`);
      this.hideContextMenu();
    }
  }
}
</script>

<style scoped>
#map-container {
  width: 100%;
  height: 100vh;
}

.context-menu {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.context-menu ul {
  list-style-type: none;
  padding: 5px;
  margin: 0;
}

.context-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.context-menu li:hover {
  background: #f0f0f0;
}
</style>
